<template>
  <div class="table">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="hospitalName" label="医院" id="title" />
      <el-table-column prop="title" label="资讯标题" id="title" />

      <el-table-column label="查看" id="title">
        <img src="../../assets/img/4.png" alt="" /><span> </span>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="currentPage1"
      :page-sizes="[9]"
      :page-size="9"
      layout="total, sizes, prev, pager, next, jumper"
      :total="45"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
import { mockService } from "../../api/mock";
// import img from "../../assets/img/"
import { defineComponent, ref, onMounted } from "vue";
export default defineComponent({
  setup() {
    const handleSizeChange = (val: any) => {
      console.log(`${val} items per page`);
    };
    // let page: any = ref(1)
    const handleCurrentChange = async (val: any) => {
      const res = await mockService.getServerList(val, 9);
      tableData.value = res.result;
      // console.log(tableData);
    };
    let tableData = ref([]);

    onMounted(async () => {
      // console.log(page);
      const res = await mockService.getServerList(1, 9);
      tableData.value = res.result;
      // console.log(tableData);
    });

    return {
      currentPage1: ref(1),
      currentPage2: ref(5),
      currentPage3: ref(5),
      currentPage4: ref(4),
      handleSizeChange,
      handleCurrentChange,
      tableData,
      input: ref(""),
    };
  },
});
</script>

<style lang="less" scoped>
.el-table-column {
  font-weight: bold;
}
</style>
